<template>
  <div>
    <el-row style="background-color: #fff;height: 30px;padding-left: 10px">
      <!--      <el-button type="primary" size="mini" @click="handleAddWarehouse"><b>+</b>&nbsp;&nbsp;添加</el-button>-->
      <!--      <el-button type="text"><i class="el-icon-bottom"></i>导入</el-button>-->
      <el-button type="text" size="mini" @click="downloadTabData"><i class="el-icon-top"></i>导出</el-button>
      <!--      <el-button type="text"><i class="el-icon-delete"></i>删除</el-button>-->
      <el-input type="text" size="mini" style="width: 200px;margin-left: 20%" placeholder="搜索数据"
                prefix-icon="el-icon-search" @blur="handleSearch" v-model="keyword"></el-input>
    </el-row>

    <!--    <el-dialog title="辅助表：库存期初期末（产品-日期）" :visible.sync="dialogFormVisible">-->
    <!--      <WarehouseAddView></WarehouseAddView>-->
    <!--    </el-dialog>-->
    <el-table
        ref="multipleTable"
        :data="warehouseAssistantDTOs"
        tooltip-effect="dark"
        style="width: 100%;margin-top: 5px"
        border
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="warehouseEntity.name"
          label="仓库"
          width="80">
      </el-table-column>
      <el-table-column
          prop="productShowEntity.productName"
          label="产品名称"
          width="140">
      </el-table-column>
      <el-table-column
          prop="productShowEntity.productCode"
          label="产品编码"
          width="150">
      </el-table-column>
      <el-table-column
          prop="productShowEntity.productBrand"
          label="品牌"
          width="120">
      </el-table-column>
      <el-table-column
          prop="productShowEntity.productModels"
          label="规格型号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="productShowEntity.priductUnit"
          label="单位"
          width="80">
      </el-table-column>
      <el-table-column
          prop="time"
          label="时间"
          width="170">
        <template slot-scope="scope">
          <span v-if="scope.row &&  scope.row.time !== ''">
            {{ $dayjs(scope.row.time).format('YYYY-MM-DD HH:mm:ss') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
          prop="enterPerson"
          label="提交人"
          width="100">
        <template #default="scope">
          <div v-html="scope.row.enterPerson"></div>
        </template>
      </el-table-column>
      <el-table-column
          label="提交时间"
          width="170"
          show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.productShowEntity && scope.row.productShowEntity.enterTime">
                    {{ $dayjs(scope.row.productShowEntity.enterTime).format('YYYY-MM-DD HH:mm:ss') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
          label="更新时间"
          show-overflow-tooltip>
        <template slot-scope="scope">
         <span v-if="scope.row.productShowEntity && scope.row.productShowEntity.updateTime">
      {{ $dayjs(scope.row.productShowEntity.updateTime).format('YYYY-MM-DD HH:mm:ss') }}
    </span>
        </template>
      </el-table-column>
    </el-table>
    <div :class="[{'pagination-fixed':pageInfo.pages<pageInfo.pageSize}/*页码固定在最下面*/        ]">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-sizes="[10, 25, 50]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import WarehouseAddView from "@/views/manage/warehouse/WarehouseAddView.vue";

export default {
  name: "WarehouseAssistantView",
  components: {WarehouseAddView},
  data() {
    return {
      warehouse: {
        "name": "",
        "productName": "",
        "code": "",
        "time": "",
      },
      warehouseAssistantDTOs: [],
      dialogFormVisible: false,
      multipleSelection: [],//批量删除
      formLabelWidth: '350px',
      keyword: "",
      pageInfo: {pageNum: 1, pageSize: 10, total: 0, pages: 0},
    }
  },
  methods: {
    handleSearch() {
      if (this.keyword != "") {
        this.$axios.post("manage/productWarehouse/assistant/list/search", {}, {
          params: {
            "keyword": this.keyword,
            "pageNum": this.pageInfo.pageNum,
            "pageSize": this.pageSize
          }
        }).then(response => {
          this.warehouseAssistantDTOs = response.data.data.list
          this.pageInfo.pageNum = response.data.pageNum
          this.pageInfo.pageSize = response.data.pageSize
        });
      } else if (this.keyword == "") {
        this.pageInfo.pageNum = 1
        this.pageInfo.pageSize = 10
        this.initData();
      }

    },
    /*调整页面条数*/
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val
      this.pageInfo.pageNum = 1
      this.initData()
    }
    ,
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageInfo.pageNum = val
      this.initData()
    }
    ,
    initData() {
      this.$axios.get("manage/productWarehouse/assistant/list",
          {
            params:
                {
                  pageNum: this.pageInfo.pageNum,
                  pageSize: this.pageInfo.pageSize
                }
          }).then(response => {
        this.pageInfo = response.data.data
        this.warehouseAssistantDTOs = response.data.data.list
      });
    }
    ,
    downloadTabData() {
      this.$axios.post("manage/productWarehouse/assistant/downloadData", this.warehouseAssistantDTOs).then(response => {
        if (response.data.code === 200) {
          this.$message.success(response.data.msg)
        }
      });
    }
    ,
    handleAddWarehouse() {
      this.dialogFormVisible = true
    }
    ,
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    }
    ,
    //   /*批量删除*/
    //   handleDeleteBatch() {
    //     let ids = this.multipleSelection.map(productCategorys => productCategorys.id);
    //     if (ids.length > 0) {
    //       this.$confirm('此操作将永久删除该条例, 是否继续?', '提示', {
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //         type: 'warning'
    //       }).then(() => {
    //         console.log("要删除的ids:" + ids)
    //         this.$axios.post("manage/productCategory/deleteBatch", ids).then(response => {
    //           this.dialogVisible = false;
    //           this.$message.success("删除成功")
    //           this.productCategorys = this.productCategorys.filter(productCategory => !ids.includes(productCategory.id))
    //         });
    //       }).catch(() => {
    //         this.$message({
    //           type: 'info',
    //           message: '已取消删除'
    //         });
    //       });
    //     } else {
    //       this.dialogVisible = false;
    //       this.$message.error("请选择要删除的条例")
    //     }
    //   },
  },
  created() {
    this.initData();
  }
}
</script>
<style scoped>
.form-scroll-container {
  max-height: 400px; /* 根据需要调整高度 */
  overflow-y: auto;
  padding: 10px; /* 可选，根据需要添加内边距 */
  //border: 1px solid #dcdfe6; /* 可选，根据需要添加边框 */
  //border-radius: 4px; /* 可选，根据需要添加圆角 */
}

/* 固定在页面底部中央的样式 */
.pagination-fixed {
  position: fixed;
  bottom: 74px; /* 距离页面底部的距离 */
  z-index: 1000; /* 确保分页组件不会被其他内容覆盖 */
}

</style>